<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>服务设备</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/umeditor1.2.3-src/themes/default/_css/umeditor.css" rel="stylesheet" />
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=e9c5bb62">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">
    <style>
        table input {
            border: none;
            width: 100%;
        }

        .lineOne {
            text-align: left;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }
        .lineOne {
            text-align: left;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }.webuploader-container {
             position: relative;
             margin-top: 15px;
         }
        #divUploadedFiles{
            padding: 20px 10px;
            border:1px dashed  #ddd;
            width:50%;
        }
    </style>
</head>

<body>
<section class="content" id="app" v-cloak=>
    <iframe id="ifExprot" style="width:0px;height:0px;display: none;" frameborder="0"></iframe>
<div style="margin-left: 16px">
    <!--查询条件选择-->

    <select id="testCom" style="width:100px;" v-model="selectCom" @change="getType" >
        <option value="提车公司">提车公司</option>
        <option v-for="itemC in itemsCom" v-bind:value="itemC.id">{{itemC.name}}</option>
    </select>


    <select id="testType" style="width:100px;" v-model="selectType" @change="getBran" >
        <option value="设备类型">设备类型</option>
        <option v-for="itemT in itemsType" v-bind:value="itemT.id">{{itemT.name}}</option>
    </select>

    <select id="testBran" style="width:100px;" v-model="selectBran" @change="getMod">
        <option value="品牌">品牌</option>
        <option v-for="itemB in itemsBran" v-bind:value="itemB.id">{{itemB.brandName}}</option>
    </select>

    <select id="testMod" style="width:100px;" v-model="selectMod" >
        <option value="型号">型号</option>
        <option v-for="itemMo in itemsMod">{{itemMo.modelName}}</option>
    </select>
    <input id="key" type="text" placeholder="请输入关键字" style="width:110px">
    <!--根据条件查询-->
    <input type="button" value="搜索" class="oaBtn" id="getBy" @click="sel()" style="position:relative;width:60px;left:10px;">
    <div id="divUpload" style="width:110px;height:0px;margin-left:880px;margin-top: -12px">
        <span style="position:relative;height:100px">导入excel</span>
    </div>
    <!--<input type="button" id="divUpload" value="导入" class="oaBtn"  style="position:relative;width:60px;left:370px;">-->
    <input type="button" value="导出" class="oaBtn"  @click="exportGet" style="position:relative;width:60px;left:1000px;">
    <input type="button" @click="add()" value="录入" class="oaBtn"  @click="save()" style="position:relative;width:60px;left:1000px;">
</div>
    <div class="div-td-content-more"><i></i></div>
    <div id="div" style="margin-top: 12px">
        <div style="float: left">
            <div class="box-body no-padding iframeH2" style="overflow: auto;margin-left: 15px;margin-top:85pxs"
                 id="scrollDiv">
                <div id="progress" class="wyui-progress"></div>
                <table class="table table-hover table-bordered text-center" id="week">
                    <tr class="td-module"style="height:25px">
                        <td style="width:50px">序号</td>
                        <td style="width:140px">公司名称</td>
                        <td style="width: 80px">设备类型</td>
                        <td style="width: 75px">品牌</td>
                        <td style="width: 75px">型号</td>
                        <td style="width: 130px">序列号</td>
                        <td style="width: 80px">自销/转入</td>
                        <td style="width: 50px">小时数</td>
                        <td style="width: 95px">交机日期</td>
                        <td style="width: 80px">客户姓名</td>
                        <td style="width: 110px">客户电话</td>
                        <td style="width: 180px">备注</td>
                        <td style="width: 133px">操作</td>
                    </tr>
                    <tr v-for="(item,i) in list" style="height: 40px">
                        <td >
                            <span>{{i+1}}</span>
                        </td>
                        <td  >
                            <span>{{item.companyName}}</span>
                        </td>
                        <td >
                            <span>{{item.deviceTypeName}}</span>
                        </td>
                        <td >
                            <span>{{item.brandName}}</span>
                        </td>
                        <td >
                            <span>{{item.modelName}}</span>
                        </td>
                        <td >
                            <span>{{item.sequence}}</span>
                        </td>
                        <td >
                            <span>{{item.saledType}}</span>
                        </td>
                        <td >
                            <span>{{item.hours}}</span>
                        </td>
                        <td >
                            <span>{{item.deliveryDate}}</span>
                        </td>
                        <td class="lineOne">
                            <span>{{item.customerName}}</span>
                        </td>
                        <td >
                            <span>{{item.customerTel}}</span>
                        </td>
                        <td class="lineOne">
                            <span >{{item.remark}}</span>
                        </td>
                        <td>
                            <span><a id="edit" @click="edit(item.id)" style="cursor: pointer">编辑&nbsp;</a><a id="detail" @click="find(item.id)" style="cursor: pointer">&nbsp;查看</a><a id="del" @click="del(item.id)" style="cursor: pointer">&nbsp;&nbsp;删除</a></span>
                        </td>
                    </tr>
                </table>
                <div class="oa-pager text-center" style="margin-top: 5px;">
                    共
                    <span id="allCount"> 0 </span>条记录&nbsp;&nbsp;&nbsp;
                    <span id="nowPage"> 1 </span>/<span id="allPage">1</span>&nbsp;&nbsp;&nbsp;
                    <span class="oa-pager-button" id="first">首页</span>
                    <span class="oa-pager-button" id="prev">上一页</span>
                    <span class="oa-pager-button" id="next">下一页</span>
                    <span class="oa-pager-button" id="last">尾页</span>
                </div>
            </div>
        </div>

    </div>

</section>

</body>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=0b5caf39"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=0c4d95a9"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script>
$.wyui.page.dataUrl = server.ip + "/deviceService/getDeviceList.json";
//$.wyui.page.queryParams.costSmallName="加油费";
$.wyui.page.getByPage_callback = function (records) {
console.log(records);
app.list = records;
};
$.wyui.page.getByPage_scroll_callback = function (list) {
if (list.length < 30) {
isLoad = false;
} else {
for (var i = 0; i < list.length; i++) {
app.list.push(list[i]);
}
isLoad = true;
}
};
</script>
<script type="text/javascript">
    function refresh() {
        $.wyui.page.getByPage();
    }
    var app = new Vue({
        el: '#app',
        data: {
            selectCom:'提车公司',
            selectType:'设备类型',
            selectBran:'品牌',
            selectMod:'型号',
            list: [],
            itemsCom: [],
            itemsBran: [],
            itemsType:[],
            itemsMod: [],
            searchParams: {
                companyName: '	',
                brandName: '',
                modelName: '',
                deviceTypeName: '',
                key:''
            },
        },
        methods: {
            getType:function () {
                var that = this;
                var s = that.selectCom;
                that.selectType="设备类型";
                that.selectBran="品牌";
                that.selectMod="型号";
                that.itemsBran="";
                that.itemsMod="";
                $.wyui.postMethod('/deviceBrand/getDeviceTypeList.json', {}, function (r) {
                    that.itemsType = r.devicetypes;
                })
            },

            getBran:function () {
                var that = this;
                var s = that.selectType;
                var d = that.selectCom;
                that.selectBran="品牌";
                that.selectMod="型号";
                that.itemsMod="";
                var data = {'deviceTypeId': s.toString(),'companyId':d};
                $.wyui.postMethod('/deviceModel/getBrandListByTypeId.json', data, function (r) {
                    console.log(r);
                    that.itemsBran = r.brands;
                })
            },
            getMod:function () {
                var that = this;
                var s = that.selectType;
                var d=that.selectBran;
                that.selectMod="型号";
                var data = {'brandId':d,'deviceTypeId':s};
                $.wyui.postMethod('/deviceModel/getModelListByBrandId.json', data, function (r) {
                    console.log(r);
                    that.itemsMod = r.models;
                })
            },
            sel :function () {
                this.searchParams.companyName=$("#testCom option:selected").text();
                this.searchParams.brandName=$("#testBran option:selected").text();
                this.searchParams.deviceTypeName=$("#testType option:selected").text();
                this.searchParams.modelName=$("#testMod option:selected").text();
                this.searchParams.key=$("#key").val();
                $.wyui.page.queryParams.requestPage = 1;
                $.extend($.wyui.page.queryParams, this.searchParams);
                console.log($.wyui.page.queryParams);
                $.wyui.page.getByPage();
            },
            importGo:function () {
                var that =this;

            },
            find :function(id){
                $.dialog({
                    content: 'url:detail.html?id=' + id,
                    title: '服务设备详情',
                    width: 1178,
                    height:580,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            edit:function (id) {
                $.dialog({
                    content: 'url:add.html?type=edit&&id=' + id,
                    title: '编辑服务设备',
                    width: 1178,
                    height:580,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            del:function (id) {
                if (confirm("确认删除?")==true){
                    var data = {'id': id}
                    var that = this;
                    $.wyui.postMethod('/deviceService/delById.json', data, function (r) {
                     that.isOk = r.isOk;
                     location.reload();
                     });
                }
            },
            add:function () {
                $.dialog({
                    content: 'url:add.html?type=add',
                    title: '编辑服务设备',
                    width: 1178,
                    height:580,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            exportGet: function () {
                var that = this;
                that.searchParams.companyName=$("#testCom option:selected").text();
                that.searchParams.brandName=$("#testBran option:selected").text();
                that.searchParams.deviceTypeName=$("#testType option:selected").text();
                that.searchParams.modelName=$("#testMod option:selected").text();
                that.searchParams.key=$("#key").val();
                $('#ifExprot').attr('src', server.ip
                    + urlConfig.Device.serviceDevice.getDownByCondition
                    + '?companyName=' + that.searchParams.companyName
                    + '&&deviceTypeName=' +that.searchParams.deviceTypeName
                    + '&&brandName=' + that.searchParams.brandName
                    + '&&modelName=' + that.searchParams.modelName
                    + '&&key=' +that.searchParams.key
                );
                return false;
            }
        },
        mounted: function () {
            var that = this;

            /*进入页面立刻查询设备的list*/
//            $.wyui.postMethod('/device/getDeviceList.json', {}, function (r) {
//                console.log(r);
//                that.items = r.records;
//            });
            $.wyui.page.getByPage();
            /*首先显示公司下拉表*/
            $.wyui.postMethod('/companyBrand/findCompanyList.json', {}, function (r) {
                console.log(r);
                that.itemsCom = r.companies;
            });
            this.uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: "/statics/plugin/webuploader-0.1.5/Uploader.swf",
                // 文件接收服务端。
                server: "http://localhost:8088" + "/importExcel/uploadFile.json",/*正式域名：http://39.106.135.205/jsyf-oa*/
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#divUpload',
                duplicate: true
            });
            this.uploader.on("uploadStart", function () {
                $("#progress").show();
            });
            this.uploader.on("uploadComplete", function () {
                $("#progress").hide();
            });
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            this.uploader.on('uploadSuccess', function (file, response) {
                alert("上传成功！");
                window.refresh();
            });

            // 文件上传失败，显示上传出错。
            this.uploader.on('uploadError', function (file) {
                alert("上传失败！");
            });
        }

    })


</script>

</html>